<!-- 文章 -->
<template>
  <div class="box">
    <div class="search">
      <div class="search-input">
        <el-input
          placeholder="输入文章标题或内容"
          v-model="input"
          clearable
          @keydown.enter="searchArt"
          maxlength="20"
          show-word-limit
          />
      </div>
      <div class="search-search">
        <el-button type="primary" @click="searchArt">搜索</el-button>
      </div>
      <div class="search-add">
        <el-button type="success" @click="addArticle = true">添加文章</el-button>
      </div>
      <div class="search-dele" >
        <el-button type="danger" @click="selectionDele">全部删除</el-button>
      </div>

      <!-- 富文本编辑器 -->
      <el-dialog v-model="showTextarea" width="60%" center :close-on-click-modal="false" destroy-on-close>
        <MyEditor :getTextareaContent="getTextareaContent" :sendTextarea="sendTextarea" :sendNum="sendNum"></MyEditor>
        <div style="width: 100%;text-align: center;margin-top: 20px;">
          <el-button type="primary" @click="showTextarea = false">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 添加文章页面 -->
      <el-dialog title="添加文章" v-model="addArticle" width="35%" center :modal="newArticle" :close-on-click-modal="false" @close="closeAddArticle">
        <el-form >
          <el-form-item label="文章标题">
            <el-input v-model="newArticle.newTitle" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="文章内容">
            <div style="width:100%;height: 180px;border-radius: 3px;position: relative;">
              <el-input
                type="textarea"
                resize="none"
                :autosize="{ minRows: 8, maxRows: 8}"
                placeholder="请输入内容"
                v-model ="newArticle.newContent"
                @focus = "sendText"
                @click="showTextarea = true"
                readonly
                />
            </div>
          </el-form-item>
          <el-form-item label="文章标签">
            <div style="width:90%;border: 1px solid #ccc;height: 100%;border-radius: 3px;box-sizing: border-box;">
              <el-tag
                :key="tag"
                v-for="tag in newArticle.newTags"
                @close="handleClose(tag)"
                closable>
                {{ tag }}
              </el-tag>
            </div>
            <div style="width:10%; height: 100%;float: left;position: relative;overflow: hidden;" class="content">
              <el-select placeholder="&nbsp;">
                <el-option
                  v-for="item in allTags"
                  :key="item"
                  :value="item"
                  @click="addTag2(item)"
                />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="文章作者">
            <div style="width:100%;height: 100%;border-radius: 3px;padding-left: 5px;overflow: hidden;box-sizing: border-box;">
              JavaEdge
            </div>
          </el-form-item>
        </el-form>
        <div style="width: 100%;text-align: center;">
          <el-button @click="closeAddArticle">取 消</el-button>
          <el-button type="primary"><span @click="addArt">确 定</span></el-button>
        </div>
      </el-dialog>
    </div>
    <div class="body" ref="wrap">

      <el-table 
        :data="articleList"
        border  
        :row-selection="true"
        @selection-change="selectionChange"
        v-loading="isShow" 
        style="width: 100%;height:100%" 
        empty-text=" "
        ref="multipleTable"
        height="100%"
        :row-style="{height: '50px'}"
        highlight-current-row
         >
        <el-table-column type="selection" width="50" />
        <el-table-column label="序号" width="60" :show-overflow-tooltip="true">
          <template #default="scope">
            {{(PageNum-1) * PageSize + scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column prop="articleTitle" label="文章标题" width="180" :show-overflow-tooltip="true"/>
        <el-table-column prop="articleContent" label="文章内容" :show-overflow-tooltip="true"/>
        <el-table-column prop="titleNames"  label="文章标签" :show-overflow-tooltip="true"/>
        <el-table-column prop="nickname"  label="文章作者" :show-overflow-tooltip="true"/>
        <el-table-column prop="createTime" label="发布时间" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" :show-overflow-tooltip="true" align="center">
          <template #default="scope" >
            <div @click="changeArticlePage = true"  style="display:inline-block;">
              <el-button type="warning" @click="getNum(scope.$index, scope.row)" class="change" style="width:80%;height:40%">
                修改 </el-button></div>
            <div style="display:inline-block;">   
              <el-popconfirm title="是否删除？"  @confirm="deleArt(scope.row.articleId)" >
                <template #reference>
                    <el-button type="danger" class="delet" style="width:80%;height:40%">删除</el-button>
                  </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
 
      <!-- 修改文章页面 -->
      <el-dialog title="修改文章" v-model="changeArticlePage" width="30%" center destroy-on-close="false" :close-on-click-modal="false" @close="closeChangeArticle">
        <el-form >
          <el-form-item label="文章标题">
            <el-input v-model="title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="文章内容">
            <div style="width:100%;height: 180px;border-radius: 3px;">
              <el-input
                type="textarea"
                resize="none"
                :autosize="{ minRows: 8, maxRows: 8}"
                placeholder="请输入内容"
                v-model ="textarea"
                @focus = "sendText2"
                @click="showTextarea = true"
                >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item label="文章标签">
            <div class="tagsDiv">
              <el-tag
                :key="tag"
                v-for="tag in successTags"
                @close="handleClose(tag)"
                closable>
                {{ tag }}
              </el-tag>
            </div>
            <div style="width:10%; height: 100%;float: left;position: relative;" class="content">
              <el-select placeholder="&nbsp;">
                <el-option
                  v-for="item in allTags"
                  :key="item"
                  :value="item"
                  @click="addTag(item)"
                />
              </el-select>
            </div>
          </el-form-item>
          <!-- <el-form-item label="发布时间">
            <div class="block" style="width:100%;height: 100%;border-radius: 3px;">
              <el-date-picker
              style="width:100%;"
                v-model="chooseDate"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </div>
          </el-form-item> -->
        </el-form>
        <div style="width: 100%;text-align: center;">
          <el-button @click="closeChangeArticle()">取 消</el-button>
          <el-button type="primary" @click="changeArt"><span>确 定</span></el-button>
        </div>
      </el-dialog>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="allPages"
        @current-change="getPageNum"
        @prev-click="getPageNum"
        @next-click="getPageNum"
      />
    </div>
  </div>
</template>

<script>

import {getAllArticle,getUserById,getAllPage,deleArticle,addArticle,searchArticle,getAllTags,addArticleTags,changeArticle} from '@/api/secondary_api/PageArticleManage';
import { ElMessage } from 'element-plus'
import MyEditor from '@/components/MyEditor.vue'
import '@wangeditor/editor/dist/css/style.css';


export default {
    name:'PageArticleManage',
    data() {
      return {
        sendNum:1,//
        sendTextarea:'',//发送给富文本的内容
        showTextarea:false,//显示富文本页面
        isShow:true,//加载页面
        PageNum:1,//当前页
        PageSize:10,//一页几条
        allPages:0,//总共多少条
        input: '',//搜索内容
        num:'',//点击修改按钮得到的id
        lineNum:'',//点击修改按钮得到的行
        changeArticlePage: false,//修改页面
        addArticle:false,//添加文章页面
        allTags:[],//所有的标签
        articleList:[],//文章的数组
        title: '',//修改文章的标题
        textarea:"",//修改文章页面的内容
        successTags: [],//修改页面的已选择标签
        selectedRows: [],//打勾的内容
        newArticle:{//添加文章
          newTitle:'',
          newContent:'',
          newTags:[],
          userId:2
        },
      }
    },
    components:{
      MyEditor,
    },
    methods: {
      sendText(){//添加文章的内容
        this.sendNum = 1
        this.sendTextarea = ''
        this.sendTextarea = this.newArticle.newContent
        console.log("aaaaaaaa"+this.sendTextarea)
      },
      sendText2(){//修改文章的内容
        this.sendNum = 2
        this.sendTextarea = ''
        this.sendTextarea = this.textarea
        console.log("bbbbbbbbb"+this.sendTextarea)
      },
      getTextareaContent(content,num){//从富文本得到的HTML内容
        if(num == 1){
          this.newArticle.newContent = content
        }else if(num == 2){
          this.textarea = content
        }
      },
      handleClose(tag) {//删除修改页面的已选择标签
        if(this.newArticle.newTags.length > 0){
          this.newArticle.newTags.splice(this.newArticle.newTags.indexOf(tag),1);
        }else{
          this.successTags.splice(this.successTags.indexOf(tag), 1);
        }
      },
      selectionChange(selection) {//打勾的内容
        this.selectedRows = selection;
      },
      selectionDele(){//全选删除
        if(this.selectedRows.length>0){
          if(this.articleList.length == this.selectedRows.length){
              if(this.PageNum-1<=0){
                this.getPageNum(1)
              }else{
                this.getPageNum(this.PageNum-1)
              }
            }
          for(var i=0;i<this.selectedRows.length;i++){
            deleArticle(this.selectedRows[i].articleId).then(
              response =>{
                if(response.code == 200){
                  this.successMessage("删除成功")
                }else{
                  this.errorMessage("删除失败")
                }
              }
            )
          }
          this.searchArticle()
          this.getAllPages()//查询总页
        }else{
          this.errorMessage("删除失败请勾选")
        }
        
      },
      getNum(index,row){//获取修改按钮得到的值
        this.num = row.articleId
        this.lineNum = index
        this.successTags = JSON.parse(JSON.stringify(this.articleList[index].titleNames))
        this.textarea = this.articleList[index].articleContent
        this.title = this.articleList[index].articleTitle
      },

      closeChangeArticle(){//
        this.changeArticlePage = false;
      },
      addTag(item){//修改文章添加标签
        var isHave = false;
        for(var i=0;i<this.successTags.length;i++){
          if(this.successTags[i] == item){
            isHave = true;
            break;
          }
        }
        if(!isHave){
          this.successTags.push(item);
        }
      },
      addTag2(item){//添加文章添加标签
        var isHave = false;
        for(var i=0;i<this.newArticle.newTags.length;i++){
          if(this.newArticle.newTags[i] == item){
            isHave = true;
            break;
          }
        }
        if(!isHave){
          this.newArticle.newTags.push(item);
        }
      },

      searchArticle(){//查询所有文章
        this.articleList = []
        this.getAllArticles(this.PageNum,this.PageSize)
      },
      getAllArticles(PageNum,PageSize){
        getAllArticle(PageNum,PageSize).then(
          response1 =>{
            for(let i = 0;i<response1.data.length; i++){
              getUserById(response1.data[i].userId).then(
                response=>{
                  let arr = {'nickname':response.data.nickname}
                  Object.assign(response1.data[i],arr);
                }
              )
            }
            setTimeout(() => {
              this.articleList = response1.data;
              this.isShow = false;
            }, 1000);
            this.isShow= true
          }
        )
      },
      getPageNum(e){//分页
        this.PageNum = e
        this.searchArticle()
      },
      deleArt(id){//删除文章
        if(this.articleList.length ==1){
          this.getPageNum(this.PageNum-1)
        }
        deleArticle(id).then(
          response =>{
            if(response.code == 200){
              this.searchArticle()
               this.getAllPages()//查询总页
              this.successMessage("删除成功")
            }else{
              this.errorMessage("删除失败")
            }
          }
        )
      },
      addArt(){//添加文章
        if(this.newArticle.newTitle == undefined ||  this.newArticle.newTitle == ''){
          this.errorMessage("文章标题不能添加空值")
        }else{
          if(this.newArticle.newContent == undefined ||  this.newArticle.newContent == ''){
            this.errorMessage("文章内容不能添加空值")
          }else{
            addArticle(this.newArticle).then(
              response=>{
                if(response.code == 200){
                  this.addArticleTag()
                  this.getAllPages()
                  this.successMessage("添加成功")
                  setTimeout(()=>{
                    this.closeAddArticle()
                  },1000)
                }else{
                  console.log("文章"+response)
                  this.errorMessage("添加失败")
                }
              }
            )
          }
        }
      },
      closeAddArticle(){//关闭添加文章页面
        this.addArticle =false
        this.newArticle.newTitle=''
        this.newArticle.newContent=''
        this.newArticle.newTags=[]
      },
      addArticleTag(){//找到新增加的文章的id与标签的id
        getAllPage().then(
          response=>{
            const allArticles = response.data
            var articleId = allArticles[response.data.length-1].articleId
            for (var i = 0; i <this.newArticle.newTags.length; i++) {
              for (var j = 0; j <this.allTags.length; j++){
                if(this.newArticle.newTags[i] == this.allTags[j]){
                addArticleTags(articleId,(j+1)).then(
                    response=>{
                      if(response.code != 200){
                        this.errorMessage("添加失败")
                      }else{
                        console.log("标签"+response)
                      }
                    }
                  )
                  break
                }
              }
            }
          }
        )
      },
      searchArt(){//搜索文章
        if(this.input.length<=0){
          this.getAllPages()
          this.searchArticle()
          this.successMessage("搜索成功")
        }else{
        searchArticle(this.input,this.PageNum=1,this.pageSize).then(
          response1=>{
            if(response1.code == 200){
              this.articleList = []
              searchArticle(this.input,0).then(
                response=>{
                  if(response.data == undefined){
                    this.allPages = 1
                    this.successMessage("搜索不到内容")
                  }else{
                    this.allPages = response.data.length
                    for(let i = 0;i<response1.data.length; i++){
                      getUserById(response1.data[i].userId).then(
                        response=>{
                          let arr = {'nickname':response.data.nickname}
                          Object.assign(response1.data[i],arr);
                        }
                      ) 
                    }
                    this.articleList = response1.data
                    this.successMessage("搜索成功")
                  }
                }
              )
            }else{
              this.errorMessage("搜索失败")
            }
          }
        )
        }
      },
      changeArt(){//修改文章
        let article = {
          articleId:this.num,
          articleTitle:this.title,
          articleContent:this.textarea,
          titleNames:this.successTags,
        }
        changeArticle(article).then(
          response=>{
            if(response.code == 200){
              this.changeArticlePage = false;
              this.successMessage("修改成功")
              this.searchArticle()
            }else{
              this.errorMessage("修改失败")
            }
          }
        )
      },
      successMessage(content){//成功信息提示
        ElMessage({
          message: content,
          type: 'success',
        })
      },
      errorMessage(content){//失败信息提示
        ElMessage.error(content)
      },
      getAllPages(){//
        getAllPage().then(
          response=>{
            this.allPages = response.data.length
          }
        )
      }
    },
    mounted(){
      this.getAllPages()//查询总页
      this.searchArticle()//查询总文章

      getAllTags().then(//查询总文章标签
        response =>{
          for(var i=0;i<response.data.length;i++){
            this.allTags.push(response.data[i].titleName)
          }
        }
      )
      this.$nextTick(()=>{//计算每页显示多少条
        let $ele = this.$refs.wrap
        let height = $ele.offsetHeight
        this.PageSize = parseInt(height/50);
        this.getAllArticles(this.PageNum,parseInt(height/50))
      })
    },
}
</script>
<style scoped>
.box{
  width: 100%;
  height: 100%;
  padding: 1% 4%;
  box-sizing: border-box;
}
.search{
  width: 100%;
  height: 60px;
  line-height: 30px;
}
.search-input{
  width: 30%;
  height: 100%;
  float: left;
}
.search-search{
  width: 10%;
  height: 100%;
  float: left;
  margin-left: 20px;
}
.search-add,.search-dele{
  width: 10%;
  height: 100%;
  float: left;
  margin-left: 3%;
}
.search-input .el-input{
  height: 70% !important;
  font-size: 17px;
}
.search-search .el-button,.search-add .el-button,.search-dele .el-button{
  width: 90%;
  height:70%;
  font-size: 14px;
}
.body{
  width: 100%;
  height: 82%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  margin-top: 10px;
}
li{
  list-style: none;
}
.change{
  background-color: #ffb800;
  font-size: 13px !important;
}
.delet{
  background-color: red;
  font-size: 13px;
}
.change:hover,.delet:hover{
  opacity: 0.4;
}
.pagination{
  width: 100%;
  margin-top: 20px;
}
.tagsDiv{
  width:90%;
  height: 100%;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding-left: 5px;
  overflow: hidden;
  box-sizing: border-box;
}
</style>